<template>
  <div class="qaList">
    <ul class="container">
      <li class="item" v-for="q of list" :key="q.id" @click="toTest(q)">
        <div class="left">
          <p class="week">{{ q.title }}</p>
          <p class="status-box">{{ q.testResult ? "已答题" : "未答题" }}</p>
        </div>
        <div class="right" v-if="q.testResult">
          <div class="right-content">
            <p>得分：{{ q.testResult.score || "----" }}分</p>
            <p>
              时间：{{
                q.testResult.beginTime | dateFormat("--------------------")
              }}
            </p>
          </div>
          <div class="right-btn">
            <p class="btn grey">历史试卷</p>
          </div>
        </div>
        <div class="right" v-else>
          <div class="right-content">
            <p>得分：----</p>
            <p>时间：--------------------</p>
          </div>
          <div class="right-btn">
            <p class="btn">立即答题</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import moment from 'moment';
import {getTestList} from '@/assets/js/api';
export default {
  filters: {
    dateFormat(v, defaultValue) {
      if (!v) {
        return defaultValue;
      } else {
        return moment(v * 1000).format('YYYY-MM-DD HH:mm:ss');
      }
    }
  },
  data() {
    return {
      userId: localStorage.userId,
      list: []
    };
  },
  methods: {
    toTest(q) {
      if (q.isEnter) {
        window.location.href = `https://www.qianduoduocaishang.com/web/api/course/${q.courseId}/learn?userId=${this.userId}#lesson/${q.lessonId}`;
      } else {
        this.$toast('您必须完成前面的试卷才可以开始本次答题');
      }
    }
  },
  mounted() {
    getTestList(this.userId).then(data => {
      this.list = data;
    });
  }
};
</script>

<style lang="less" scoped>
.qaList {
  background: #ffffff;
  padding: 20px;
  .container {
    background: linear-gradient(180deg, #4f6bf2 0%, #73c3fe 100%);
    background: #4f6bf2;
    padding: 40px 30px;
    .item {
      display: flex;
      align-items: center;
      &:not(:last-child) {
        margin-bottom: 5px;
      }
      .left {
        height: 140px;
        width: 140px;
        border-radius: 10px;
        text-align: center;
        background: #ffffff;
        // box-shadow: 5px 0px 5px #eeeeee;
        transform: perspective(500px) translate3d(0px, 0, 2px);
        p {
          width: 100%;
          margin-top: 15px;
        }
        .week {
          font-size: 34px;
          font-weight: 500;
        }
        .status-box {
          width: 100px;
          margin: 0px auto;
          margin-top: 10px;
          padding: 5px;
          color: #fff;
          background: linear-gradient(135deg, #2bc993 0%, #89dfa0 100%);
        }
      }
      .right {
        background: #ffffff;
        flex: 1;
        height: 115px;
        position: relative;
        align-self: center;
        display: flex;
        align-items: center;
        .right-content {
          font-size: 24px;
          flex: 1;
          color: #888888;
        }
        .right-btn {
          width: 140px;
          .btn {
            width: 126px;
            height: 55px;
            line-height: 55px;
            border-radius: 75px;
            border: 1px solid #4f6bf2;
            color: #4f6bf2;
            text-align: center;
            font-size: 26px;
          }
          .grey {
            color: #888888;
            border: 1px solid #888888;
          }
        }
      }
    }
  }
}
</style>
